<template>
      <el-card>
        <el-row slot="header" class="clearfix">
          <el-col :span="12"><h3>企业余额查询</h3></el-col>
          <el-col :span="12">
            <el-form :inline="true" style="float: right">
              <el-form-item label="余额">
                <el-input v-model="params.condition.balance" placeholder="输入余额"></el-input>
              </el-form-item>
              <el-button type="primary" @click="queryBalance()">查询欠费</el-button>
            </el-form>
          </el-col>
        </el-row>

        <el-table :data="arrearsCompany">
          <el-table-column label="企业名称" prop="name"></el-table-column>
          <el-table-column label="电话号码" prop="phone"></el-table-column>
          <el-table-column label="账单" prop="sumBill"></el-table-column>
          <el-table-column label="已缴费" prop="sumPayment"></el-table-column>
          <el-table-column label="余额" prop="balance"></el-table-column>
          <el-table-column label="电费/水费" prop="type"></el-table-column>
        </el-table>
        <el-pagination
            :current-page.sync="params.page"
            :page-size.sync="params.size"
            :total="total"
            background
            layout="prev, pager, next,jumper"
            @current-change="queryBalance"
            style="margin-top: 20px"
        >
        </el-pagination>


      </el-card>
</template>

<script>
import {getBalance} from "../../../../network/hydropowerApi";

export default {
  name: "balance",
  data() {
    return {
      params: {
        page: 1,
        size: 10,
        condition: {
          balance: ""
        }
      },
      total: 0,
      arrearsCompany: []
    }
  },
  methods: {
    queryBalance() {
      getBalance(this.params).then(res => {
        this.arrearsCompany = res.data.records
        this.total = res.data.total
      })
    }
  },
  mounted() {
    this.queryBalance()
  }
}
</script>

<style scoped>

</style>